<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.menu{
			margin: 0 auto;
			height: 35px;
			line-height: 35px;
			width: 400px;
			background-color:#999999;
		}
		.menu .menu-item{
			float: left;
			width: 65px;
			border-right: 1px solid #fdfdfd;
			text-align: center;
			color: #ffffff;
			cursor: pointer;
		}
		.content{
			margin: 0 auto;
			height: 200px;
			width: 398px;
			border: 1px dashed #999999;
			border-top: 0px;
		}
		.hide{
			display: none;
		}
		.active{
			background-color: #ff6600;
		}
	</style>
</head>
<body>
<div class="menu">
	<div class="menu-item active">菜单一</div>
	<div class="menu-item">菜单二</div>
	<div class="menu-item">菜单三</div>
</div>
<div class="content">
	<div>内容一</div>
	<div class="hide">内容二</div>
	<div class="hide">内容三</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $('.menu-item').click(function () {
        //被点击div的样式添加active，其他兄弟div样式去掉div
        $(this).addClass('active').siblings().removeClass('active');
        //获取被点击div的index索引
        var index=$(this).index('.menu-item');
        //根据索引找到content内容孩子中的对应div并移除样式hide，其他兄弟div添加h样式ide
        $('.content').children().eq(index).removeClass('hide').siblings().addClass('hide');
    })
</script>
</body>